<style scoped>
  .country{
    border-bottom: 1px solid #E9E9E9;
    box-sizing: border-box;
    padding: 0 10px;
    width:100%;
    overflow-x: scroll;
  }
  .country ul{
    display: block;
    /*padding: 10px 0 0 0;*/
    /*height:40px;*/
  }
  .country ul li{
    display: inline-block;
    /*width:50px;*/
    font-size: 12px;
    color: #a4a3a9;

  }
  .country ul li a{
    color: #a4a3a9;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding:4px 0;
    float: left;
  }
  .country ul li span{
    float: right;
  }
  @media screen and (max-width: 320px) {
    .country ul li span{
      margin-right: 6px;
      margin-top: 4px;
    }
  }
  @media screen and (max-width:375px) and (min-width:321px) {
    .country ul li span{
      margin-right: 8px;
      margin-top: 6px;
    }
  }
  @media screen and (min-width: 376px){
    .country ul li span{
      margin-right: 10px;
      margin-top: 6px;
    }
  }
  .country ul li:last-child span{
    display: none;
  }
  .country ul li a b{
    width:100%;
    height:3px;
    background: #4b67fb;
    /*margin-top: 4px;*/
    position: absolute;
    bottom:0;
    background: linear-gradient(to right, #6379F8 0%,#91A5F8 100%);
  }
  .country ul li a{
    opacity: 0.5;
  }
  .country ul li a.color{
    opacity: 1;
  }
  .country ul li a.color p{
    color: #4b67fb;
  }
  .country ul li a{
    /*flex-grow:10;*/
    /*margin-right: 10px;*/
    text-align:left;
  }
  .compose{
    width:100%;
    padding:10px 0;
  }
  .compose>.compose-top{
    display: flex;
    justify-content: space-between;
  }
  .compose>.compose-top>.compose-t-left h4{
    color: #7590FF;
    border: 1px solid #7590FF;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    padding:0 10px;
  }
  .compose-bottom{
    width:100%;
  }
  .compose-bottom ul{
    display: flex;
    height:100px;
  }
  .compose-bottom ul li{
    flex: 1;
  }
  .compose-bottom ul li>div{
    width:100%;
  }
  /*.compose>.compose-top>.compose-t-right{*/
    /*display: flex;*/
    /*justify-content: center;*/
  /*}*/
  /*.compose>.compose-top>.compose-t-right small{*/
    /*display: flex;*/
    /*align-items: center;*/
  /*}*/
  /*.compose>.compose-top>.compose-t-right p{*/
    /*display: flex;*/
    /*align-items: center;*/
  /*}*/


  /*.compose{*/
    /*display: flex;*/
    /*flex-direction: row;*/
    /*width:100%;*/
    /*overflow: hidden;*/
    /*height:180px;*/
    /*margin-top: 10px;*/
  /*}*/
  /*.compose>div{*/
    /*margin-left: 10px;*/
    /*!*margin-top: 10px;*!*/
    /*width:100%;*/
    /*height: 170px;*/
    /*border-radius: 10px;*/
    /*overflow: hidden;*/
    /*position: relative;*/
  /*}*/
  /*.compose>div>a>div.echarts{*/
    /*width:100%;*/
    /*height: 170px;*/
  /*}*/
  /*!*.compose div{*!*/
    /*!*box-shadow:0px 0px 14px #ccc*!*/
  /*!*}*!*/
  /*.compose>div:first-child{*/
    /*box-shadow:0px 0px 14px #7592fd*/
  /*}*/
  /*.compose .ame{*/
    /*position: absolute;*/
    /*color: #fff;*/
    /*top:10px;*/
    /*left:14px;*/
    /*text-align: center;*/
  /*}*/
  .pic{
    width:100%;
    height:390px;
    background: url("../assets/img/bg.jpg") no-repeat;
    background-size: cover;
  }
</style>

<template>
  <div>
    <my-header></my-header>
    <div class="country">
      <ul ref="ulWidth" id="ul">
        <li ref="liWidth">
          <router-link to="/all" class="color"><p>全部</p><b></b></router-link>
          <span>|</span>
        </li>
        <li id="liW">
          <a><p>美国</p></a>
          <span>|</span>
        </li>
        <li>
          <a><p>英国</p></a>
          <span>|</span>
        </li>
        <li>
          <a><p>法国</p></a>
          <span>|</span>
        </li>
        <li>
          <a><p>德国</p></a>
          <span>|</span>
        </li>
        <li>
          <a><p>日本</p></a>
          <span>|</span>
        </li>
        <li>
          <a><p>新加坡</p></a>
          <span>|</span>
        </li>
        <li>
          <a><p>香港</p></a>
          <span>|</span>
        </li>
      </ul>
    </div>
    <div class="compose">
      <div class="compose-top">
        <div class="compose-t-left">
          <h4>重点推荐</h4>
          <router-link to="subscribe">查看详情</router-link>
        </div>
        <!--<div class="compose-t-right">-->
          <!--<small>显示全部</small>-->
          <!--<p class="iconfont icon-xiangyou1"></p>-->
        <!--</div>-->
      </div>
      <div class="compose-bottom">
        <ul>
          <li>
            <div style="background: #7592fd;">
              <router-link to="/subscribe">
                <!--<chart :options="line1" width="200" id="chart1"></chart>-->
                <!--<div class="ame">-->
                  <!--<p>热门美国</p>-->
                  <!--<h2>股票神奇组合</h2>-->
                <!--</div>-->
              </router-link>
            </div>
          </li>
          <li><div style="background: #7592fd;">
            <router-link to="/subscribe">
              <!--<chart :options="line1" width="200" id="chart1"></chart>-->
              <!--<div class="ame">-->
                <!--<p>热门美国</p>-->
                <!--<h2>股票神奇组合</h2>-->
              <!--</div>-->
            </router-link>
          </div></li>
          <li><div style="background: #7592fd;">
            <router-link to="/subscribe">
              <!--&lt;!&ndash;<chart :options="line1" width="200" id="chart1"></chart>&ndash;&gt;-->
              <!--<div class="ame">-->
                <!--<p>热门美国</p>-->
                <!--<h2>股票神奇组合</h2>-->
              <!--</div>-->
            </router-link>
          </div></li>
          <li><div style="background: #7592fd;">
            <!--<router-link to="/subscribe">-->
              <!--<chart :options="line1" width="200" id="chart1"></chart>-->
              <!--<div class="ame">-->
                <!--<p>热门美国</p>-->
                <!--<h2>股票神奇组合</h2>-->
              <!--</div>-->
            <!--</router-link>-->
          </div></li>
        </ul>
      </div>
        <!--<div style="background: #7592fd;">-->
          <!--<router-link to="/subscribe">-->
            <!--<chart :options="line1" width="200" id="chart1"></chart>-->
            <!--<div class="ame">-->
              <!--<p>热门美国</p>-->
              <!--<h2>股票神奇组合</h2>-->
            <!--</div>-->
          <!--</router-link>-->
        <!--</div>-->
      <!--<div><chart :options="line2" width="200"></chart></div>-->
      <!--<div><chart :options="line3" width="200"></chart></div>-->
    </div>
    <div class="pic"></div>
    <my-footer></my-footer>
  </div>
</template>

<script>
import myHeader from '../components/header.vue'
import myFooter from '../components/footer.vue'
import ECharts from 'vue-echarts/components/ECharts.vue'
import echarts from 'echarts/lib/echarts'
// import 'echarts/lib/echarts'
import 'echarts/lib/chart/line'

export default {
  components: {
    myHeader,
    myFooter,
    chart: ECharts
  },
  data () {
    return {
      line1: {
        title: {
          show: true,
          text: '热门美国股票神奇组合',
          textStyle: {
            color: '#000'
          }
        },
        tooltip: {
          show: true,
          trigger: 'axis'
        },
        grid: {
          top: '0',
          left: '-38',
          bottom: '-28',
          right: '0',
          width: '100%',
          containLabel: true
        },
        xAxis: [
          {
            show: false,
            type: 'category',
            splitLine: {
              show: false
            },
            boundaryGap: false,
            axisLabel: {
              show: false
            },
            axisTick: false,
            data: ['', '', '', '', '', '', '']
          }
        ],
        yAxis: [
          {
            show: false,
            min: 0,
            max: 100,
            type: 'value',
            splitLine: {
              show: false
            },
            splitNumber: 9,
            boundaryGap: false,
            axisLabel: {
              show: false
            },
            axisLine: false,
            axisTick: false
          }
        ],
        series: [
          {
            type: 'line',
            smooth: true,
            symbol: 'none',
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#8099ff'
                }, {
                  offset: 1,
                  color: '#b5c4f9'
                }])
//                color: '#8099ff'
              }
            },
            itemStyle: {
              normal: {
                color: '#9cb0fe',
                lineStyle: {
                  color: '#ffffff'
                }
              }
            },
            data: [20, 30, 50, 30, 50, 20, 50]
          }
        ]
      }

    }
  },
  mounted: function () {
    window.onresize = ECharts.resize
//    document.getElementById('chart1').getElementsByTagName('canvase').css('width', '100%')
    let winW = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
    let liW = winW / 6.8
//      let w = document.getElementById("liW").offsetWidth
    let ulW = liW * 8.8
    this.$refs.ulWidth.style.width = ulW + 'px'
    let lis = document.getElementById("ul").getElementsByTagName("li")
    for(let i = 0; i < lis.length; i++ ){
      document.getElementById("ul").getElementsByTagName("li")[i].style.width = liW + 'px'
    }
  }
}
</script>

